<template>
  <Card style="margin-top:20px;" class="user-device--detail-card">
    <div slot="title">
      <h2 style="font-size: 24px;font-weight: 100;margin-top: 5px;">
        重要数据监控
        <span style="font-size:10px;font-weight:200;"
          >数据最新更新：{{ lastUpdatedAt }}</span
        >
      </h2>
    </div>
    <div slot="extra">
      <div style="display: inline-block; padding-right: 80px;">
        <span class="circle_ circle_zhengchang"></span>&nbsp;正常 &nbsp;&nbsp;
        <span class="circle_ circle_yujing"></span>&nbsp;预警 &nbsp;&nbsp;
        <span class="circle_ circle_gaojing"></span>&nbsp;告警
      </div>
    </div>
    <Row :gutter="16">
      <!-- 温度 -->
      <template>
        <Col :span="6" v-for="(item, index) in temperatureArray" :key="item.id">
          <current-card
            type="temperature"
            :color="genColor(item.state)"
            :value="item.value"
            :title="item.des"
            :unit="item.unit"
          ></current-card>
        </Col>
      </template>

      <!-- 电流 -->
      <template>
        <Col :span="6" v-for="(item, index) in currentArray" :key="item.id">
          <current-card
            type="current"
            :color="genColor(item.state)"
            :value="item.value"
            :title="item.des"
            :unit="item.unit"
          ></current-card>
        </Col>
      </template>
    </Row>
    <p style="color: #4FC1E9;text-align:right;">
      <a @click.stop="handleDetail" style="color: #4FC1E9"
        >点击查看详细数据列表</a
      >
    </p>
    <Modal v-model="visible" footer-hide class-name="vertical-center-modal">
      <transition name="dialog-form-fade">
        <device-data-detail v-if="visible" :deviceId="id"></device-data-detail>
      </transition>
    </Modal>
  </Card>
</template>
<script>
import { getRealtimeDataList as httpGetRealtimeDatas } from "@/api";

import CurrentCard from "./CurrentCard";
import DeviceDataDetail from "./DeviceDataDetail";
export default {
  props: ["id", "deviceId"],
  components: {
    "current-card": CurrentCard,
    "device-data-detail": DeviceDataDetail
  },
  data() {
    return {
      lastUpdatedAt: "",
      currentArray: [],
      temperatureArray: [],
      visible: false
    };
  },
  watch: {
    id(newValue, value) {
      if (newValue !== value) {
        this.init();
      }
    }
  },
  methods: {
    init() {
      const vm = this;
      const params = { deviceId: vm.id };
      httpGetRealtimeDatas(params).then(res => {
        if (res.data) {
          if (res.data.length === 0) {
            vm.lastUpdatedAt = "-";
            vm.temperatureArray = [];
            vm.currentArray = [];
          } else {
            vm.lastUpdatedAt = vm
              .moment(res.data[0].createdAt)
              .format("YYYY-MM-DD HH:mm");
            const responseData = res.data;
            const temperatureFlags = [5, 6, 7, 8];
            const currentFlags = [12, 13, 14, 15, 63];
            const deviceId = String(vm.deviceId);

            if (!deviceId.startsWith("9")) {
              vm.currentArray = responseData.filter(
                item => ~currentFlags.indexOf(item.type)
              );
              vm.temperatureArray = responseData.filter(
                item => ~temperatureFlags.indexOf(item.type)
              );
            } else {
              vm.temperatureArray = res.data;
              vm.currentArray = [];
            }
          }
        }
      });
    },
    genColor(state) {
      switch (state) {
        case 2:
          return "yellow";
        case 3:
          return "red";
        case 1:
        default:
          return "";
      }
    },
    handleDetail() {
      this.visible = true;
    }
  }
};
</script>
<style>
.user-device--detail-card .ivu-card-head {
  border-bottom: 0 none;
  line-height: normal;
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical-center-modal .ivu-modal {
  top: 0;
}
</style>
